<template>
  <div class="tabbar">
    <div
      class="item"
      v-for="(item, index) in tabbarData"
      :key="item.path"
      :class="{active: currentIndex === index}"
      @click="itemHandleClick(index, item.path)">
      <img v-if="currentIndex === index" :src="getAssetUrl(item.imageActive)" alt="" />
      <img v-else :src="getAssetUrl(item.image)" alt="" />
      <span class="text">{{item.text}}</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { useRouter } from "vue-router"
import tabbarData from '@/assets/data/tabbar'
import getAssetUrl from "@/utils/getAssetUrl"

const router = useRouter()
const currentIndex = ref(0)
const itemHandleClick = (index, path) => {
  currentIndex.value = index
  router.push(path)
}

</script>

<style lang="less" scoped>
.tabbar {
  display: flex;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
      width: 36px;
    }

    .text {
      font-size: 12px;
      margin-top: 2px;
    }
  }
}

.active {
  color: var(--primary-color);
}
</style>
